import React, { useEffect, useState } from 'react'

import api from '../../api'
import TitleAllow from '@/components/title-allow'
import BetterScrolls from '@/components/better-scrolls/better-scrolls'

import './recommend.scss'

const Recommonend = (props) => {
  const [personalized, setPersonalized] = useState([])
  const [personalizedMv, setPersonalizedMv] = useState([])
  const [anchor, setAnchor] = useState([])
  const [recommend, setRecommend] = useState([])

  const { jumpOriginalDetailWithId } = props
  
  useEffect(() => {
    init()
    console.log(props)
  }, [])

  const init = () => {
    const promiseAll = Promise.all(
      [
        api.getPersonalized({ limit: 10 }).then(res => {
          const { result = [] } = res
          setPersonalized(result)
        }),
        api.getPersonalizedMv().then(res => {
          const { result = [] } = res
          setPersonalizedMv(result)
        }),
        api.getAnchor().then(res => {
          const { result = [] } = res
          setAnchor(result)
        }),
        api.getRecommend().then(res => {
          const { programs = [] } = res
          setRecommend(programs)
        })
      ]
    )
    return promiseAll
  }
  

  const renderList = (data, imgKey = 'picUrl', nameKey = 'name') => {
    return (
      <div className='recommend-list'>
        {
         data && Array.isArray(data) && data.map(item => {
           return (
            <div
              className='list-item'
              key={item.id + item.name}
              onClick={() => jumpOriginalDetailWithId(item.id)}
            >
              <img src={item[imgKey]} className='list-item-img' />
              <p className='list-item-name'>{ item[nameKey] }</p>
            </div>
           )
         }) 
        }
      </div>
    )
  }

  return (
    <BetterScrolls pull={ init }>
      <div className='recommonend'>
        <TitleAllow title='推荐节目' />
        { renderList(recommend, 'coverUrl', 'name')}
        <TitleAllow title='推荐MV' />
        { renderList(personalizedMv)}
        <TitleAllow title='推荐电台' />
        { renderList(anchor, 'picUrl', 'name')}
        <TitleAllow title='推荐歌单' />
        { renderList(personalized)}
      </div>
    </BetterScrolls>
  )
}

export default Recommonend